<template>
	<view class="swiper-3d" @longpress="longpress">
		<!-- <view class="backimg" @click="back()">
			<view class="" :style="'height: '+statusBarHeight+'px;'"></view>
			<image src="/static/index/back.png" mode=""></image>
		</view> -->
		<view class="sharetop">
			<image :src="userInfo.avatar" mode=""></image>
			<view class="right">
				<view class="">{{userInfo.nickname}}</view>
				<view class=""></view>
			</view>
		</view>
		<view class="shareka">
			<view class="text1">尊贵用户</view>
			<view class="text2">推荐码：{{username}}
			 </view>
			<view class="text3">云数据服务带给你不一样的体验~</view>
		</view>
		<l-painter :board="poster" ref="poster" v-if="isShow" />
		<!-- <view class="save" @click="longpress">
			<image src="../static/index/save.png" mode=""></image>
			<view class="">保存图片</view>
		</view> -->
		<u-loading-page :loading="loading"></u-loading-page>
	</view>
</template>
<script>
	import image1 from '@/static/index/shareQrcode.png'
	import image2 from '@/static/index/shareQrcode1.png'
	export default {
		data() {
			return {
				userInfo:{},
				statusBarHeight:0,
				imgbox: [],
				imgSrc: '',
				canvasQrPath: "",
				text: '',
				size: 150,
				codeImg: "",
				colorDark: '#000000',
				colorLight: '#ffffff',
				list: [],
				canvasHeight: 0,
				canvasWidth: 0,
				loading: false,
				username: '',
				isShow: false,
				poster: {
					css: {
						// 根节点若无尺寸，自动获取父级节点
						width: '750rpx'
					},
					views: [{
							css: {
								background: "",
								// height: '100%',
								width: '92%',
								marginTop: '30rpx',
								marginLeft: '30rpx',
								display: "inline-block"
							},
							type: "image",
							src: image1,
						},
						{
							type: 'qrcode',
							text: 'limeui.qcoon.cn',
							css: {
								background: '',
								position: 'absolute',
								top: '31%',
								left: '23%',
								marginLeft: '5rpx',
								width: '400rpx',
								height: '400rpx'
							}
						},
						 {
							text: "",
							type: "text",
							css: {
								display: "block",
								paddingBottom: "10rpx",
								color: "#fff",
								fontSize: "32rpx",
								fontWeight: "bold",
								position: 'absolute',
								top: '50rpx',
								right: '50rpx',
							}
						},
						{
							text: "",
							type: "text",
							css: {
								display: "block",
								paddingBottom: "10rpx",
								color: "#fff",
								fontSize: "32rpx",
								fontWeight: "bold",
								position: 'absolute',
								top: '90rpx',
								right: '50rpx',
							}
						},
					]
				}
			};
		},
		async onLoad(Option) {
			const phoneInfo = uni.getSystemInfoSync();
			this.statusBarHeight = phoneInfo.statusBarHeight
			const that = this
			uni.setNavigationBarTitle({
				title: this.$t('home.name28')
			})
			if (this._i18n.locale == 'zh') {
				this.poster.views[0].src = image2
			} else {
				this.poster.views[0].src = image1
			}
			this.$fun.ajax.post('user/index', {}).then(res => {
				if (res.code == 1) {
					this.userInfo = res.data
				}
			})
			this.loading = true
			this.canvasHeight = uni.getSystemInfoSync().windowHeight / 2
			this.canvasWidth = uni.getSystemInfoSync().windowWidth
			const res = await this.$fun.ajax.post('/config/invitation', {})
			const response = await this.$fun.ajax.post('user/getH5Qrcode', {})
			if (res.code == 1) {
				// this.poster.views[0].css.width = this.canvasWidth
				// this.poster.views[0].css.height = this.canvasHeight
				// let heightratio = uni.getSystemInfoSync().windowHeight / res.data[0].bg_height
				// this.poster.views[1].css.width = res.data[0].qr_width * (that.canvasWidth / (res.data[0].bg_width))+'rpx'
				// this.poster.views[1].css.height = res.data[0].qr_height * (that.canvasHeight / res.data[0].qr_height)+'rpx'
				// this.poster.views[1].css.top = that.canvasHeight * (res.data[0].y_axis_bl)
				// this.poster.views[1].css.left = that.canvasWidth * (res.data[0].x_axis_bl)
			}
			if (response.code == 1) {
				this.poster.views[1].text = response.data.url
				this.username=response.data.username
				this.poster.views[3].text=response.data.nickname
				this.poster.views[2].text=response.data.mobile;
				// this.imgSrc = response.data
			}
			this.loading = false
			this.isShow = true
		},
		methods: {
			back(){
				uni.navigateBack()
				console.log('111')
			},
			longpress() {
				const that = this
				this.$refs.poster.canvasToTempFilePathSync({
					fileType: "png",
					quality: 1,
					success: (res) => {
						// #ifndef H5
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function() {
								that.$fun.msg(that.$t('home.name31'))
							}
						});
						// #endif
						// 非H5 保存到相册
						// #ifdef H5
						const a = document.createElement('a')
						a.href = res.tempFilePath
						a.download = 'image'
						a.click()
						this.$fun.msg(this.$t('home.name31'))
						// #endif
					},
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: $uni-bg-color;
		background: url('/static/index/sharebg.png') no-repeat;
		background-size: 100% 100%;
	}
	.sharetop{
		margin: 30rpx;
		display: flex;
		align-items: center;
		color: #fff;
		image{
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			margin-right: 12rpx;
		}
		
	}
	.shareka{
		background: url('/static/index/kapian(2).png') no-repeat;
		background-size: 100% 100%;
		width: 690rpx;
		height: 296rpx;
		margin: 30rpx auto;
		padding: 30rpx;
		.text1{
			color: #f6f0cc;
			font-size: 40rpx;
			margin: 0 30rpx;
		}
		.text2,.text3{
			color: #bbb4ad;
			font-size: 24rpx;
			margin: 30rpx;
		}
		.text3{
			margin-top: 86rpx;
		}
	}
	.backimg {
		position: fixed;
		top: 30rpx;
		left: 30rpx;
		z-index: 1;
		image {
			width: 44rpx;
			height: 44rpx;
		}
	}
	.img_box {
		position: fixed;
		bottom: 50rpx;
		width: 80%;
		display: flex;
		justify-content: space-around;
		z-index: 100;
		left: 0;
		right: 0;
		margin: auto;

		image {
			width: 100rpx;
			height: 100rpx;
		}
	}

	.swiper-3d {
		padding: 0upx;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		margin: auto;

		.s-container {
			height: 900upx;
			width: 100%;

			.swiper-item {
				// max-width: 630upx;
				height: 90%;
				padding: 0upx 20upx;
				box-sizing: border-box;
				position: relative;

			}

			.item-img {
				// position: absolute;
				margin-top: 30upx;
				width: 100%;
				height: 80%;
				// border-radius: 15upx;
				z-index: 5;
				// opacity: 0.7;
				// top: 7%;
				// transform: translateY(-50%);
				// box-shadow:0px 4upx 15upx 0px rgba(153,153,153,0.24);
			}

			.active {
				opacity: 1;
				z-index: 10;
				height: 90%;
				top: -3%;
				transition: all .1s ease-in 0s;
				transform: translateY(0);
			}
		}

		.swiper-dot {
			display: flex;
			justify-content: center;
			align-items: center;

			// padding-top: 10upx;
			.dot {
				margin: 0 10upx;
				width: 15upx;
				height: 15upx;
				border-radius: 50%;
				background: #bbb;

				&.on {
					background: #F4BD48;
				}
			}
		}
	}
	.save{
		text-align: center;
		color: #fff;
		font-size: 24rpx;
		image{
			width: 72rpx;
			height: 72rpx;
		}
	}
</style>